<!--
 * @Author: Bennty
 * @Date: 2024-12-17 14:56:23
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-12-17 15:39:14
 * @Description: 请填写简介
-->
<template>
    <el-dialog :model-value="props.visible" title="申请加急" width="30%" @close="handleClose">
        <el-form ref="formRef" :model="formData" label-width="120px" :rules="rules">
            <el-form-item label="制单员：">{{ props.orderDetails.createByName }}</el-form-item>
            <el-form-item label="制单日期：">{{ props.orderDetails.createTime }}</el-form-item>
            <el-form-item label="销售单号：">{{ props.orderDetails.saleOrderCode }}</el-form-item>
            <el-form-item label="申请加急日期：" prop="applyDate">
                <el-date-picker v-model="formData.applyDate" type="date" placeholder="请选择" :disabled-date="setDateLimit" format="YYYY-MM-DD" :value-format="'YYYY-MM-DD'" />
            </el-form-item>
            <el-form-item label="申请加急原因" prop="applyReason">
                <el-input type="textarea" v-model="formData.applyReason" placeholder="请输入" style="width: 260px"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button  type="primary" @click="handleSubmit(formRef)" >确 定</el-button>
                <el-button @click="handleClose">取 消</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import type { FormInstance,FormRules } from 'element-plus';
import { applyUrgentApi } from '@/api/sj/productManagement/customizedOrder';

const props = defineProps<{
    visible: boolean,
    orderDetails: any,
}>();
const emits = defineEmits(['close', 'submit']);
const formRef = ref<FormInstance>();
const formData = ref({
    applyDate: undefined,
    applyReason: undefined
});

const rules = reactive<FormRules>({
    applyReason:[
        {required: true, message: '申请加急原因必填', trigger: 'blur'}
    ]
});

const setDateLimit = (date: Date) => {
    const createTimeStamp = Date.parse(props.orderDetails.createTime);
    const limit = new Date(createTimeStamp);
    return date < limit;
};

const handleSubmit = async (formEl: FormInstance | undefined) => {
    if(!formEl) return;
    await formEl.validate(async (valid, fields)=>{
        if(valid){
            const submitData = {
                ...formData.value,
                businessId: props.orderDetails.id
            };
            const { code } = await applyUrgentApi(submitData);
            if(code == 200){
                emits('submit', true);
                handleClose();
            }else{
                emits('submit', false);
            }
        }else{
            console.log('error submit!', fields);
        };
    });
    
};

const handleClose = () => {
    formRef.value?.resetFields();
    emits('close')
};
</script>

<style scoped>

</style>